<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字相关</title>
</head>

<body>
    
    <h1>文本相关</h1>

    <h2>文本颜色</h2>
    <strong>color : 属性,有内容元素当中的文本颜色</strong>
    <hr>
    <style>
        span{color:red}
    </style>
    <span>
        This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "尝试一下" link.
    </span>

    <h2>文本的对齐方式</h2>
    <strong>文本排列属性是用来设置文本的水平对齐方式 </strong>
    <!-- center: 居中
    left 左对齐
     right 右对齐
     justify 左，右外边距是对齐 -->
    <style>
        #aligndiv{
            width:100%;border:1px solid greenyellow;
            text-align: justify;
        }
    </style>
    <p id="aligndiv">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>

    <h2>文本修饰</h2>
    <strong> 属性用来设置或删除文本的装饰。我们不建议强调指出不是链接的文本，因为这常常混淆用户。用在A上面</strong>
    <!-- 
        线的位置 
        underline    : 下面
        line-through : 中间
        overline     : 上面

        样式 
         dashed ： 虚红 
         double ： 双实线
         solid  :  细线

        颜色

           值
    -->
    <style>
        /* 多个选择器采用相同的样式  可以通过  ,  来分隔 */
        a,span{
            text-decoration:line-through dashed red;
            margin: 14px;
        }
        span:hover,a:hover{
            text-decoration:underline double red;
        }
       
    </style>
    <a href="">点我</a><a href="">点我</a><a href="">点我</a><a href="">点我</a>
    <span>你试试</span>
    <div>你看啥</div>

    <h2>文本转换</h2>
    <strong>文本转换属性是用来指定在一个文本中的大写和小写字母。</strong>
    <!-- 
        text-transform: lowercase; 全部转换成为小写 
        text-transform: uppercase; 全部转换成为小写 
        text-transform: capitalize; 首字母全部大写
     -->
    <style>
        div{text-transform: capitalize;}
    </style>
    <div>
        This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "尝试一下" link.
    </div>
    <h2>文本缩进</h2>
    <style>
        p {color:red;text-align: justify;text-indent: 30px;}
    </style>
    <p>
        This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "尝试一下" link
    </p>

    <h2>字体</h2>
    <strong>字体属性定义字体，加粗，大小，文字样式。</strong>
    <hr>
    <style>
        #textMy{
            font-family: 宋体;
            font-size: 3em;
            font-style: italic;
            font-weight: 100;
        }
    </style>
    <span id="textMy">This text is styled with some of the text formatting properties. The heading uses the text-ali</span>
</body>
</html>